<template>
    <el-dialog v-model="visible" title="文件库" width="70%" :before-close="close" :close-on-click-modal="false"
               @opened="dataTableRef?.refresh()"
               align-center draggable>
        <data-table ref="dataTableRef" api="fileSystem/files" :params="params" :height="height" lazy>
            <template #search>
                <div style="align-items: center; display: flex;grid-column: span 2 / span 2;">
                    <div class="el-page-header__left">
                        <el-button link :disabled="!params.currentFolderId" @click="onBack()">
                            <template #icon>
                                <el-icon>
                                    <svg-icon icon="el-icon-back"/>
                                </el-icon>
                            </template>
                            返回上一级
                        </el-button>
                        <el-divider direction="vertical" />
                        <div class="el-page-header__content">
                            <el-form-item v-show="false">
                                <el-input v-model="params.id"/>
                            </el-form-item>
                            <el-form-item v-show="false">
                                <el-input v-model="params.currentFolderId"/>
                            </el-form-item>
                            <el-form-item label="名称" prop="name">
                                <el-input v-model="params.name" clearable/>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </template>
            <template #default>
                <el-table-column align="center"  width="45" fixed>
                    <template #default="scope">
                        <el-image :src="fileIcon(scope.row.extension)" style="position: relative;float: left; width: 1.8em;height: 1.8em;"/>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" align="left" min-width="350px" show-overflow-tooltip sortable fixed>
                    <template #default="scope">
                        <el-link v-if="scope.row.extension !== 'folder'" :underline="false" type="primary" style="text-decoration: none">
                            {{scope.row.name}}
                        </el-link>
                        <el-link v-else :underline="false" type="primary" style="text-decoration: none" @click="onEnter(scope)">
                            {{scope.row.name}}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="changeTime" label="修改日期" width="180" align="left" sortable>
                    <template #default="scope">
                        {{scope.row.changeTime.substring(0, 16)}}
                    </template>
                </el-table-column>
                <el-table-column prop="extension" label="类型" width="180" align="left">
                    <template #default="scope">
                        {{scope.row.extension ==='database'? '文件库':scope.row.extension ==='folder'? '文件夹': scope.row.extension}}
                    </template>
                </el-table-column>
                <el-table-column prop="size" label="大小" width="150" align="right" header-align="center">
                    <template #default="scope">
                        {{['folder', 'database'].includes(scope.row.extension)? '':sizeFormat(scope.row.size)}}
                    </template>
                </el-table-column>
                <el-table-column prop="scope" label="操作" width="80" align="center" header-align="center" fixed="right">
                    <template #default="scope">
                        <el-button v-if="scope.row.id !== database?.currentFolderId" @click="onDelete(scope)" link type="danger">
                            <template #icon>
                                <svg-icon icon="icon-delete"/>
                            </template>
                            删除
                        </el-button>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
            </template>
        </data-table>
    </el-dialog>
</template>

<script lang="ts" setup>
import {ref, reactive} from "vue";
import {FileDatabase, SearchForm} from "@/views/applet/files/interface";
import {service, fileIcon, sizeFormat} from "@/utils";
import DataTable from '@/components/data-table/index.vue';

const database = ref<FileDatabase>()
const dataTableRef = ref<InstanceType<typeof DataTable>>();
const visible = ref(false);
const height = ref(window.innerHeight * 0.65);
const params = reactive<SearchForm>({
    id: '',
    currentFolderId: '',
    name: ''
})

function close () {
    visible.value = false;
}
function onEnter ({row}) {
    params.name = '';
    params.currentFolderId = row.id
    dataTableRef.value?.refresh();
}

function onBack() {
    params.name = '';
    params.currentFolderId = '';
    dataTableRef.value?.refresh();
}

function onDelete ({row}) {
    service.confirm(`确定删除${row.extension === 'folder'? `目录[${row.name}]及其子`:`${row.name}`}文件，删除后无法恢复文件?`, {
        url: `/fileSystem/${row.extension === 'folder'?'folder':'file'}`,
        data: {id: row.id},
        success: dataTableRef.value?.refresh
    })
}

// 展示弹窗
const open = (row: any) => {
    visible.value = true;
    if (row) {
        params.id = row.id
        params.currentFolderId = '';
        database.value = row
    }
};

defineExpose({open})
</script>